<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React!</title>
    <!--注意导入顺序-->
    <script src="./js/react.16.4.js"></script>
    <script src="./js/react-dom.16.4.js"></script>

    <!--将JSX语法 转换成javascript语法 -->
    <script src=" ./js/babel.min.js"></script>

    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
    <style>
        .ps {
            font-weight: bold;
            border: 1px solid;
        }
    </style>
</head>
<body>
<div id="example"></div>

<script type="text/babel">

    let h1style = {
        backgroundColor: "#f40",
        color: "green"
    }

    // todo 组件首字母大写
    // todo 样式 class 要用className
    // todo React 数字不需要带单位
    //todo 参数在this.props 中
    class Hello extends React.Component { // todo 定义组件,继承于 React.Component

        constructor(props) {
            super(props)
            this.state = {style1: {}}
        }

        changeColor() {
            this.setState({
                style1: {"color": "#f40"}
            })
        }

        render() {
            return (
                <div style={{backgroundColor: "yellow", borderWidth: 5, borderColor: "black", borderStyle: "solid"}}> // 行间style样式
                    <h1 style={h1style}>{this.props.firstRow}</h1> // 变量style样式
                    <p className="ps" style={this.state.style1}>{this.props.secondRow}</p>
                    <div className="btn btn-default" onClick={this.changeColor.bind(this)}>点击变色</div>
                </div>
            )
        }
    }

    let abc = "this is h1"

    ReactDOM.render(
        <Hello firstRow={abc} secondRow="this is p"/>, // todo 这里给组件传参数
        document.getElementById("example")
    )


</script>
</body>

</html>